<template>
    <view class="u-p-t-22">
        <view class="item">
            <view class="bottom-border flex-c-s">
                <view class="item_l left">姓名</view>
                <view class="flex-c" style="flex: 1">
                    <u-input v-model="form_data.name" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 30rpx" border="none" clearable></u-input>
                </view>
            </view>

            <view class="bottom-border flex-c-s">
                <view class=" left">联系方式</view>
                <view class="flex-c" style="flex: 1">
                    <u-input v-model="form_data.phone" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 30rpx" border="none" clearable></u-input>
                </view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">紧急联系人</view>
                <view class="flex-c" style="flex: 1">
                    <u-input v-model="form_data.emergencyContactPerson" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 30rpx" border="none" clearable></u-input>
                </view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">性别</view>
                <view class="flex-c" style="flex: 1; font-size: 30rpx" @click="form_data.sex == '男' ? (form_data.sex = '女') : (form_data.sex = '男')">{{ form_data.sex }} ></view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">生日</view>
                <view class="flex-c" style="justify-content: flex-start; flex: 1">
                    <!-- <picker mode="date" :value="form_data.birthday" :end="$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')" @change="(e) => (form_data.birthday = e.detail.value)">
                        <text v-if="form_data.birthday" class="flex-c" style="flex: 1; font-size: 30rpx">{{ form_data.birthday }} ></text>
                        <text v-else class="" style="font-size: 30rpx; text-align: left">请选择时间 ></text>
                    </picker> -->
                    <u-input v-model="form_data.birthday" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 30rpx" border="none" clearable></u-input>
                </view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">家庭住址</view>
                <view class="flex-c" style="flex: 1">
                    <u-input v-model="form_data.address" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 30rpx" border="none" clearable></u-input>
                </view>
            </view>
        </view>
        <view style="background-color: white; padding: 30rpx">
            <u-textarea style="height: 100rpx" v-model="form_data.note" placeholder="备注"></u-textarea>
        </view>
        <u-gap height="300rpx"></u-gap>
        <view class="bottom-list2">
            <view class="flex-c-c tijiao u-m-b-30" @click="submit">确定</view>
        </view>

        <a-tabbar path="pages/tabbar/order"></a-tabbar>
    </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
const form_data = reactive({
    id: '', //id
    name: '', //姓名
    balance: '', //卡内余额
    birthday: '', //生日
    sex: '男', //性别
    phone: '', //联系方式
    emergencyContactPerson: '', //紧急联系人
    address: '', //家庭住址
    note: '' //备注
});
const submit = () => {
	// !form_data.phone ||
    if ( !form_data.name) return uni.$u.toast('信息不完整');
    // if (!uni.$u.test.mobile(form_data.phone)) return uni.$u.toast('手机号格式不正确');
    form_data.id = Date.now();
    uni.showModal({
        title: '提交',
        content: '请确认信息填写正确',
        showCancel: true,
        cancelText: '修改',
        confirmText: '提交',
        success: (res) => {
            if (res.confirm) {
                uni.$store('data').addItemTostudentList(form_data);
                uni.$u.route({
                    url: '/pages/tabbar/index',
                    type: 'switchTab'
                });
            }
        }
    });
};
</script>

<style scoped lang="scss">
.item_l {
    flex: 0 0 auto;
    position: relative;
}

.item_l::before {
    content: '*';
    color: rgb(249, 62, 45);
    position: absolute;
    left: -10px;
}
.title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
}

.view-2 {
    width: 702rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 0 auto;
    padding: 34rpx 24rpx;
    margin-bottom: 30rpx;

    .text-3 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 28rpx;
    }

    .image-3 {
        width: 96rpx;
        height: 96rpx;
    }

    .take-photo {
        width: 288rpx;
        height: 68rpx;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        border: 2rpx solid $main_color;

        font-size: 28rpx;
        color: $main_color;
        line-height: 33rpx;
        margin-top: 22rpx;
    }
}

.item {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    & > view {
        height: 100rpx;
        padding: 0 28rpx;
    }

    .bottom-border {
        border-bottom: 2rpx dashed #f1f1f1;
    }

    .left {
        font-size: 32rpx;
        width: 180rpx;
        color: #000000;
    }

    .right {
        font-size: 32rpx;
        color: #999999;
    }

    .yan-zheng-ma {
        width: 160rpx;
        height: 48rpx;
        background: $main_color;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin-left: 24rpx;

        font-size: 32rpx;
        color: #ffffff;
    }
}

.bottom-list2 {
    width: 750rpx;
    padding: 30rpx 0 120rpx;
    position: fixed;
    bottom: 0;
    background-color: white;
    padding-top: 18rpx;

    .xiyi {
        font-size: 24rpx;
    }

    .tijiao {
        width: 702rpx;
        margin: 0 auto;
        height: 80rpx;
        background: $bg_color;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 32rpx;
        color: white;
    }
}
</style>
